<template>
  <page-header-wrapper :title="false">
    <a-card title="荣誉证书管理">
      <template slot="extra">
        <a-button type="primary" icon="plus" size="small" @click="addCert">添加证书</a-button>
      </template>
      <s-table
        bordered
        ref="table"
        size="middle"
        :row-key="(record) => record.id"
        :columns="certColumns"
        :data="certData"
      >
        <template slot="file" slot-scope="text">
          <img :src="text" width="50" />
        </template>
        <template slot="action">
          <a-button type="danger" size="small" icon="delete">删除</a-button>
        </template>
      </s-table>
    </a-card>
    <a-modal
      title="添加证书信息"
      v-model="visible"
      @ok="onSubmit"
    >
      <a-form-model
        ref="certForm"
        :model="certForm"
        :rules="certRules"
      >
        <a-form-model-item label="证书分类">
          <a-select v-model="certForm.category_id" placeholder="请选择证书分类">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="证书名称">
          <a-input v-model="certForm.name" type="text" placeholder="请输入证书名称" />
        </a-form-model-item>
        <a-form-model-item label="证书缩略图">
          <a-upload-dragger
            name="file"
            accept=".jpg,.png,.jpeg"
            :action="uploadUrl"
            :headers="headers"
            @change="onChangeUpload"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              拖拽文件至此区域
            </p>
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item label="证书作用" placeholder="请输入证书作用">
          <a-input v-model="certForm.action" type="text" />
        </a-form-model-item>
        <a-form-model-item label="证书官费" placeholder="请输入证书官费">
          <a-input v-model="certForm.official_fee" type="text" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import shopColumns from '@/columns/tm.shop'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import apis from '@/api'
import { getAddCert, getCertList, postAddCert } from '@/api/tm.shop'

export default {
  components: { STable },
  name: 'Cert',
  data () {
    return {
      visible: false,
      certColumns: shopColumns.cert,
      certData: parameters => {
        return getCertList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      certForm: {},
      certRules: {
        name: []
      },
      headers: { 'Access-Token': storage.get(ACCESS_TOKEN) },
      uploadUrl: apis.Upload,
      typeOpts: {}
    }
  },
  methods: {
    addCert () {
      const app = this
      getAddCert().then(res => {
        if (res.status === 0) {
          app.typeOpts = res.result.categoryOpts
          app.visible = true
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onChangeUpload (info) {
      if (info.file.status === 'uploading') {
        return false
      }
      if (info.file.status === 'done') {
        this.certForm.file = info.file.response.result.url
        this.certForm.filename = info.file.name
      }
    },
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.certForm.validate(valid => {
        if (valid) {
          for (const k in app.certForm) {
            data['zs[' + k + ']'] = app.certForm[k]
          }
          postAddCert(data).then(res => {
            if (res.status === 0) {
              app.visible = false
              app.$refs.table.refresh()
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
